<script lang="ts" setup>
// 导入系统用户 API 类型定义
import type { AiDutyStatusRecordsApi } from '#/api/moxi/comprehensiveStaffinfo';

// 从 Vue 导入计算属性和响应式引用相关函数
import { computed, ref } from 'vue';

// 导入自定义抽屉组件钩子函数
import { useVbenDrawer } from '@vben/common-ui';
// 导入消息提示组件
import { message } from 'ant-design-vue';
import descriptions from './descriptions.vue';
// 导入自定义表单组件钩子函数
// import { useVbenForm } from '#/adapter/form';
// 导入系统用户相关的 API 方法
import { createUser, getUser, updateUser } from '#/api/system/user';
// 导入国际化函数
import { $t } from '#/locales';



// 定义自定义事件，用于通知父组件操作成功
const emit = defineEmits(['success']);
// 定义响应式引用，用于存储表单数据
const formData = ref<AiDutyStatusRecordsApi.CombinedRecords>();
    const props = defineProps<{
    searchDeptId?: number;
}>();
// 计算属性，根据是否有表单数据的 id 来动态生成标题
// const getTitle = computed(() => {
//   console.log(formData.value);
//   return formData.value?.id
//     ? $t('ui.actionTitle.edit', ['用户']) // 有 id 表示编辑操作
//     : $t('ui.actionTitle.create', ['用户']); // 没有 id 表示创建操作
// });

// 使用自定义表单钩子函数创建表单组件和表单 API
// const [Form, formApi] = useVbenForm({
//   commonConfig: {
//     componentProps: {
//       class: 'w-full', // 设置表单项宽度为 100%
//     },
//   },
//   // 表单布局为 2 列
//   wrapperClass: 'grid-cols-2',
//   // 表单布局模式为水平布局
//   layout: 'horizontal',
//   // 获取表单模式配置
//   schema: useFormSchema(),
//   // 不显示默认的操作按钮
//   showDefaultActions: false,
// });

// 使用自定义抽屉钩子函数创建抽屉组件和抽屉 API
const [Drawer, DrawerApi] = useVbenDrawer({
  // 抽屉确认事件处理函数
//   async onConfirm() {
//     // 对表单进行验证
//     const { valid } = await formApi.validate();
//     // 若验证不通过，直接返回
//     if (!valid) {
//       return;
//     }
//     // 锁定抽屉，防止用户重复操作
//     DrawerApi.lock();
//     // 获取表单数据
//     const data = (await formApi.getValues()) as SystemUserApi.User;
//     try {
//       // 根据是否有 id 决定是更新用户还是创建用户
//       await (formData.value?.id ? updateUser(data) : createUser(data));
//       // 关闭抽屉
//       await DrawerApi.close();
//       // 触发自定义事件通知父组件操作成功
//       emit('success');
//       // 显示操作成功的消息提示
//       message.success($t('ui.actionMessage.operationSuccess'));
//     } finally {
//       // 解锁抽屉
//       DrawerApi.unlock();
//     }
//   },
  // 抽屉打开状态变化事件处理函数
  async onOpenChange(isOpen: boolean) {
    // 若抽屉关闭，清空表单数据
    if (!isOpen) {
      formData.value = undefined;
      return;
    }
    // 获取抽屉传递的数据
    const data = DrawerApi.getData<AiDutyStatusRecordsApi.CombinedRecords>();
    formData.value = data;
    console.log('抽屉打开状态变化事件处理函数1');
    console.log(data);
    console.log(formData.value);
    // 若没有数据或没有 id，直接返回
    if (!data || !data.id) {
      return;
    }
    // 锁定抽屉，防止用户重复操作
    DrawerApi.lock();
    try {
      // 根据 id 获取用户详情数据
        //   formData.value = await getUser(data.id as number);
      // 将获取到的数据设置到表单中
        //   await formApi.setValues(formData.value);
    } finally {
      // 解锁抽屉
      DrawerApi.unlock();
    }
  },
});
</script>

<template>
  <!-- 渲染抽屉组件，设置标题和宽度 -->
  <Drawer title="详细数据" class="w-1/2" :footer="false">
    <!-- 渲染表单组件，设置左右外边距 -->
   <descriptions :formData="formData" :searchDeptId="props.searchDeptId"/>
  </Drawer>
</template>
